<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/4
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页面</title>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin: 0px;
    }
    a{
        text-decoration: none;
    }
    .clearfix:after{
        content: "";
        display: block;
        height: 0px;
        clear: both;
        visibility: hidden;
    }
    .container{
        width: 1200px;
        margin:0 auto;
    }
    .bestSellers{
        width: 100%;
    }
    .bestSellers p{
        border-bottom: 2px solid blue;
        font-size: 20px;
        margin-bottom: 10px;
    }
    .bestSellers p .tag{
        margin-right: 50px;
    }
    .bestSellers p span:not([class="tag"]){
        margin:0 20px;
    }
    .bestSellersImg .imgDiv{
        float: left;
        width: 210px;
        height: 260px;
        margin: 10px;
    }
    .bestSellersImg .imgDiv img{

        width: 210px;
        height: 260px;
    }
    .bestSellersImg .imgDiv div{
        position: relative;
        width: 200px;
        top: -80px;
        color: white;
        margin: 0 auto;
    }
    .popularityIndex p,.excellentTravel p{
        text-align: center;
    }
    .popularityIndex p span:first-child ,.excellentTravel p span:first-child{
        font-size: 30px;
        color: black;
    }
    .popularityIndexImg .imgDiv,.excellentTravelImg .imgDiv{
        float: left;
        width: 210px;
        height: 260px;
        margin: 10px;
    }
    .popularityIndexImg .imgDiv img,.excellentTravelImg .imgDiv img{
        width: 210px;
        height: 260px;
    }
    .popularityIndexImg .imgDiv div,.excellentTravelImg .imgDiv div{
        position: relative;
        top: -60px;
        text-align: center;
        color: white;
    }
    .bestSellers,.popularityIndex,.excellentTravel{
        margin-bottom: 60px;
    }

    .footer{
        background-color: darkgray;
    }
    .footerTop ,.footerBottom{
        width: 1000px;
        margin: 10px auto;
    }
    .introduce{
        float: left;
        width: 48%;
        border-right: 1px solid gray;
    }
    .introduce p,.focus p{
        font-size: 20px;
        text-align: center;
        color: white;
        margin: 5px auto
    }
    .focus{
        float: left;
        width: 48%;
    }
    .footerBottom p{
        text-align: center;
        margin: 10px auto;
    }
    .footerBottom div{
        margin-left: 200px;
    }
</style>
<body>
<div class="container">
    <div class="bestSellers">
        <p>
            <span class="tag"><a href="">旅游度假</a></span>
            <span><a class="aTravel" href="javascript:void(0)" onclick="bestSeller(this)">当季热卖</a></span>
            <span><a class="aTravel" href="javascript:void(0)" onclick="around(this)">周边游</a></span>
            <span><a class="aTravel" href="javascript:void(0)" onclick="domestic(this)">国内游</a></span>
            <span><a href="">更多></a></span>
        </p>
        <div class="bestSellersImg clearfix">
            <div class="imgDiv">
                <img class="imgDivImg" src="C:\Users\Administrator\Desktop\img1.jpg">
                <div>
                    <span>云台山二日游|云台山一日游|云台山旅游路线|三环</span>
                    <br>
                    <span>￥299起</span>
                </div>
            </div>
            <div class="imgDiv">
                <img class="imgDivImg" src="C:\Users\Administrator\Desktop\img1.jpg">
            </div>
            <div class="imgDiv">
                <img class="imgDivImg" src="C:\Users\Administrator\Desktop\img1.jpg">
            </div>
            <div class="imgDiv">
                <img class="imgDivImg" src="C:\Users\Administrator\Desktop\img1.jpg">
            </div>
            <div class="imgDiv">
                <img class="imgDivImg" src="C:\Users\Administrator\Desktop\img1.jpg">
            </div>
        </div>
        <div class="bestSellersImg clearfix">
            <div class="imgDiv">
                <img class="imgDivImg" src="C:\Users\Administrator\Desktop\img2.jpg">
                <div>
                    <span>云台山二日游|云台山一日游|云台山旅游路线|三环</span>
                    <br>
                    <span>￥299起</span>
                </div>
            </div>
            <div class="imgDiv">
                <img class="imgDivImg" src="C:\Users\Administrator\Desktop\img2.jpg">
            </div>
            <div class="imgDiv">
                <img class="imgDivImg" src="C:\Users\Administrator\Desktop\img2.jpg">
            </div>
            <div class="imgDiv">
                <img class="imgDivImg" src="C:\Users\Administrator\Desktop\img2.jpg">
            </div>
            <div class="imgDiv">
                <img class="imgDivImg" src="C:\Users\Administrator\Desktop\img2.jpg">
            </div>
        </div>
    </div>
    <div class="popularityIndex">
        <p>
            <span><a href="">人气指数</a></span>&nbsp;&nbsp;
            <span><a href="">更多></a></span>
        </p>
        <div class="popularityIndexImg clearfix">
            <div class="imgDiv">
                <img src="C:\Users\Administrator\Desktop\img3.jpg">
                <div>
                    <span>普吉岛</span>&nbsp;&nbsp;&nbsp;
                    <span>人气数：10w+</span>
                </div>
            </div>
            <div class="imgDiv">
                <img src="C:\Users\Administrator\Desktop\img3.jpg">
            </div>
            <div class="imgDiv">
                <img src="C:\Users\Administrator\Desktop\img3.jpg">
            </div>
            <div class="imgDiv">
                <img src="C:\Users\Administrator\Desktop\img3.jpg">
            </div>
            <div class="imgDiv">
                <img src="C:\Users\Administrator\Desktop\img3.jpg">
            </div>
        </div>
    </div>
    <div class="excellentTravel clearfix">
        <p>
            <span><a href="">精品游记</a></span>&nbsp;&nbsp;
            <span><a href="">更多></a></span>
        </p>
        <div class="excellentTravelImg">
            <div class="imgDiv">
                <img src="C:\Users\Administrator\Desktop\img4.jpg">
                <div>
                    <span>夏末南洋，小小闺蜜</span><br>
                    <span>新加坡</span>
                </div>
            </div>
            <div class="imgDiv">
                <img src="C:\Users\Administrator\Desktop\img4.jpg">
            </div>
            <div class="imgDiv">
                <img src="C:\Users\Administrator\Desktop\img4.jpg">
            </div>
            <div class="imgDiv">
                <img src="C:\Users\Administrator\Desktop\img4.jpg">
            </div>
            <div class="imgDiv">
                <img src="C:\Users\Administrator\Desktop\img4.jpg">
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footerTop clearfix">
        <div class="introduce">
            <p>选飞鸟，请放心</p>
            <span>近10000名旅游顾问遍布全国近43235名旅游顾问遍布全国
				，为您提供旅游个性化服务。</span><br>
            <span>
				专业资质保障，累积服务600万人；真实游客点评，无后顾之忧。</span><br>
            <span>飞鸟旅游网致力于让您享受旅行本身的乐趣。</span>
        </div>
        <div class="focus">
            <div>
                <p>关注飞鸟</p>
                <img src="">
                <img src="">
            </div>
        </div>
    </div>
    <div class="footerBottom">
        <p>关于飞鸟|加入飞鸟|免责声明|联系飞鸟|建议与投诉</p>
        <div>
            <img src="C:\Users\Administrator\Desktop\图片1.png">
            <img src="C:\Users\Administrator\Desktop\图片2.png">
            <img src="C:\Users\Administrator\Desktop\图片3.png">
            <img src="C:\Users\Administrator\Desktop\图片4.png">
            <img src="C:\Users\Administrator\Desktop\图片5.png">
        </div>
        <p>
            <span>飞鸟旅游网-中国在线旅游网站</span>
            <span>豫ICP备110120119号</span>
            <span>豫公网安备11491112315号</span>
        </p>
    </div>
</div>

<script type="text/javascript">
    var imgs = document.getElementsByClassName("imgDivImg");
    var aNodes = document.getElementsByClassName("aTravel");
    function bestSeller(obj){
        for (var i = 0; i < aNodes.length; i++) {
            aNodes[i].style.color = "blue";
        }
        obj.style.color = "red";
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].src="C:/Users/Administrator/Desktop/img1.jpg";
        }

    }
    function around(obj){
        for (var i = 0; i < aNodes.length; i++) {
            aNodes[i].style.color = "blue";
        }
        obj.style.color = "red";
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].src="C:/Users/Administrator/Desktop/img2.jpg";
        }
    }
    function domestic(obj){
        for (var i = 0; i < aNodes.length; i++) {
            aNodes[i].style.color = "blue";
        }
        obj.style.color = "red";
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].src="C:/Users/Administrator/Desktop/img4.jpg";

        }
    }
</script>
</body>
</html>
